<template>
	<div class="order">
		<div class="order-box">
			<div class="order-text">
				<h3>全部订单</h3>
				<router-link to="#">
					<span>查看全部<i class="iconfont">&#xe646;</i></span>
				</router-link>
			</div>
			<div class="order-main">
				<ul>
					<li v-for="item in list" :key="item.id">
						<router-link to="#">
							<img :src="item.img" alt="">
							<p>{{item.txt}}</p>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
</template>

<script>
	export default{
		name:'Order',
		data(){
			return{
				list:[
					{id:1,img:'userimg/1-3.png',txt:'待付款'},
					{id:2,img:'userimg/1-4.png',txt:'已付款'},
					{id:3,img:'userimg/1-5.png',txt:'待评价'},
					{id:4,img:'userimg/1-6.png',txt:'退款/售后'}
				]
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: #000000;
	}
	.order{
		position: relative;
		height: 4rem;
		width: 100%;
		margin-top: 1rem;
		background-color: #f5f5f5;
	}
	.order-box{
		position: absolute;
		margin-top: .5rem;
		margin-left: .25rem;
		width: 95%;
		border-radius: .3rem;
		background-color: white;
		height: 3rem;
	}
	.order-text{
		display: flex;
		height: 1rem;
	}
	.order-text h3{
		text-indent: 1em;
		line-height: 1rem;
		font-size: .5rem;
	}
	.order-text span{
		width: 20%;
		margin-left: 5rem;
		color: #C2C2C2;
		line-height: 1rem;
		font-size: .3rem;
	}
	.order-main ul li{
		float: left;
		text-align: center;
		width: 25%;
	}
	.order-main img{
		width: 1.3rem;
	}
</style>
